<template>
  <div class="page-wrapper">
    <div class="trolley-container">
      <div class="header">台车管理</div>
      
      <!-- Context menu for right-click functionality -->
      <q-menu 
        v-model="contextMenuVisible" 
        :target="menuTarget"
        anchor="bottom right"
        self="top left"
      >
        <q-list dense style="min-width: 100px">
          <q-item clickable v-close-popup @click="deleteNeedItem">
            <q-item-section>删除</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
      
      <div class="info-panel">
        <div class="info-list">
          <div class="info-item">
            故障信号: <span class="indicator" :style="{ backgroundColor: faultSignal === '1' ? 'red' : 'green' }"></span>
          </div>
          <div class="info-item">
            锁定信号: <span class="indicator" :style="{ backgroundColor: lockSignal === '0' ? 'green' : 'red' }"></span>
          </div>
          <div class="info-item">控制模式: {{ controlMode }}</div>
          <div class="info-item">台车位置: {{ location }}</div>
          <div class="info-item">
            机组上台车状态: {{ getReceiveControlStatusText() }}
            <q-btn
              v-if="receiveControlStatus === '0' || receiveControlStatus === '1'"
              flat
              dense
              size="sm"
              icon="edit"
              color="primary"
              class="status-edit-btn"
              @click="showReceiveControlStatusDialog"
            />
          </div>
          <div class="info-item">
            材料1: {{ material1 }}
            <q-btn
              v-if="material1 !== '--'"
              flat
              dense
              size="md"
              icon="delete"
              color="negative"
              class="material-delete-btn"
              @click="clearMaterial('01', material1)"
            />
          </div>
          <div class="info-item">
            材料2: {{ material2 }}
            <q-btn
              v-if="material2 !== '--'"
              flat
              dense
              size="md"
              icon="delete"
              color="negative"
              class="material-delete-btn"
              @click="clearMaterial('02', material2)"
            />
          </div>
          <div class="button-container">
            <q-btn 
              color="primary" 
              label="创建过跨指令" 
              @click="openCreateOrderDialog"
              class="create-order-btn"
            />
          </div>
        </div>

        <div class="trolley-display">
          <div class="trolley-visualization">
            <div class="position position-center">
              <!-- 根据材料状态显示不同图片，进一步增大尺寸 -->
              <img v-if="material1 !== '--' && material2 !== '--'" src="/trolley/a.png" alt="台车位置" width="240" />
              <img v-else-if="material1 !== '--' && material2 === '--'" src="/trolley/b.png" alt="台车位置" width="240" />
              <img v-else-if="material1 === '--' && material2 !== '--'" src="/trolley/c.png" alt="台车位置" width="240" />
              <img v-else src="/trolley/d.png" alt="台车位置" width="240" />
            </div>
            
            <div class="warehouse-labels">
              <div class="warehouse warehouse-center">{{ location }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-table">
        <div class="tables-container">
          <div class="table-section left-table" :class="{ 'no-data-scrollbar': isOrderTableEmpty }">
            <div class="table-title">台车指令</div>
            <table>
              <thead>
                <tr>
                  <th v-for="(title, index) in tableTitles" :key="index">{{ title }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(row, index) in tableData" :key="index">
                  <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="table-section right-table" :class="{ 'no-data-scrollbar': isNeedTableEmpty }">
            <div class="table-title">过跨需求</div>
            <table>
              <thead>
                <tr>
                  <th v-for="(title, index) in needTableTitles" :key="index">{{ title }}</th>
                </tr>
              </thead>
              <tbody>
                <template v-if="needTableData.length">
                  <tr 
                    v-for="(row, index) in needTableData" 
                    :key="index"
                    :class="{ 'hoverable-row': row.matNo }"
                  >
                    <td>{{ row.matNo || '' }}</td>
                    <td>{{ row.sourceArea || '' }}</td>
                    <td>{{ row.targetArea || '' }}</td>
                    <td>{{ row.needStatus ? getNeedStatusText(row.needStatus) : '' }}</td>
                    <td class="action-cell">
                      <q-btn
                        v-if="row.matNo"
                        flat
                        dense
                        size="sm"
                        icon="delete"
                        color="negative"
                        @click="deleteItem(row)"
                      />
                    </td>
                  </tr>
                </template>
                <template v-else>
                  <tr>
                    <td colspan="5" class="text-center">暂无数据</td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 图片导入不再需要
// import trolleyImageA from '../../assets/trolley/a.png'
// import trolleyImageB from '../../assets/trolley/b.png'
// import trolleyImageC from '../../assets/trolley/c.png'
// import trolleyImageD from '../../assets/trolley/d.png'
import { useWebsocket } from '../_sys/use-websocket1'
import { ref, onMounted, h, computed } from 'vue'
import { api } from 'src/boot/api'
import { useQuasar } from 'quasar'
import { defineComponent } from 'vue'

export default {
  name: 'TrolleyYl',
  setup() {
    const $q = useQuasar()
    const wsInstance = ref(null);
    
    // 右键菜单状态
    const contextMenuVisible = ref(false);
    const selectedRow = ref(null);
    
    // 存储菜单目标元素
    const menuTarget = ref(null);
    
    wsInstance.value = useWebsocket('PLC_DATA_WEBSOCK', (payload) => {
      if (payload && payload.data && payload.data !== 'pong') {
        handlePlcData(payload.data);
      }
    });

    const faultSignal = ref('0');
    const lockSignal = ref('0');
    const controlMode = ref('本地');
    const location = ref('未到位');
    const receiveControlStatus = ref('--'); // 机组上台车状态
    const material1 = ref('--'); // 硬编码测试值
    const material2 = ref('--');
    const tableData = ref([
      [ '', '', '', '', ''],
      [ '', '', '', '', ''],
      [ '', '', '', '', ''],
      [ '', '', '', '', '']
    ]);
    const needTableData = ref([]);
    
    // 存储库位数据
    const stockOptions = ref([]);
    
    // 获取库位数据的函数
    const fetchStockOptions = async () => {
      try {
        // 如果已经有数据，不需要重新获取
        if (stockOptions.value.length > 0) {
          return;
        }
        
        const response = await api.post('/MainMonitor/stockInfo', {});
        if (response && response.data && Array.isArray(response.data)) {
          // 创建级联选择数据结构
          const h001Options = response.data
            .filter(item => item.stockNo.startsWith('H001'))
            .map(item => ({
              value: item.stockNo,
              label: item.stockName
            }));
          
          const h004Options = response.data
            .filter(item => item.stockNo.startsWith('H004'))
            .map(item => ({
              value: item.stockNo,
              label: item.stockName
            }));
          
          // 构建级联结构
          stockOptions.value = [
            {
              label: 'H001',
              value: 'H001',
              children: h001Options
            },
            {
              label: 'H004',
              value: 'H004',
              children: h004Options
            }
          ];
          
          console.log('成功获取库位数据:', stockOptions.value.length, '个主类别');
        } else {
          console.warn('获取库位信息失败，返回数据格式不正确');
          stockOptions.value = [];
        }
      } catch (error) {
        console.error('获取库位信息失败:', error);
        stockOptions.value = [];
      }
    };

    // 获取台车指令数据
    const fetchTrolleyOrders = async () => {
      try {
        const response = await api.get('/trolleyController/getAllTrolleyOrder');
        if (response && response.data) {
          updateTableData(response.data);
        }
      } catch (error) {
        console.error('获取台车指令数据失败:', error);
      }
    };

    // 获取台车需求数据
    const fetchTrolleyNeeds = async () => {
      try {
        const response = await api.get('/trolleyController/getAllTrolleyNeed');
        if (response && response.data) {
          updateNeedTableData(response.data);
        }
      } catch (error) {
        console.error('获取台车需求数据失败:', error);
      }
    };

    // 获取机组上台车状态
    const getReceiveControlStatus = async () => {
      try {
        const response = await api.get('/trolleyController/getReceiveControlStatus');
        
        // 根据实际接口返回格式调整数据解析
        if (response && response.code === 200 && response.data && response.data.status !== undefined) {
          receiveControlStatus.value = response.data.status.toString();
        } else if (response && response.data && response.data.result && response.data.result.status !== undefined) {
          receiveControlStatus.value = response.data.result.status.toString();
        } else {
          receiveControlStatus.value = '--';
        }
      } catch (error) {
        console.error('获取机组上台车状态失败:', error);
        receiveControlStatus.value = '--';
      }
    };

    // 获取机组上台车状态显示文本
    const getReceiveControlStatusText = () => {
      if (receiveControlStatus.value === '1') {
        return '开启';
      } else if (receiveControlStatus.value === '0') {
        return '关闭';
      } else {
        return '--';
      }
    };

    // 显示修改机组上台车状态的确认对话框
    const showReceiveControlStatusDialog = () => {
      const isCurrentlyOpen = receiveControlStatus.value === '1';
      const actionText = isCurrentlyOpen ? '关闭' : '开启';
      const confirmMessage = isCurrentlyOpen 
        ? '确认要关闭机组上台车状态吗？' 
        : '确认要开启机组上台车状态吗？开启后只会卸到台车上，卸完后请关闭。';
      
      $q.dialog({
        title: '确认操作',
        message: confirmMessage,
        cancel: true,
        persistent: true
      }).onOk(() => {
        // 执行状态切换
        const newStatus = isCurrentlyOpen ? 0 : 1;
        setReceiveControlStatus(newStatus);
      });
    };

    // 设置机组上台车状态
    const setReceiveControlStatus = async (status) => {
      try {
        const response = await api.post(`/trolleyController/setReceiveControlStatus?status=${status}`);
        if (response && response.code === 200) {
          $q.notify({
            type: 'positive',
            message: response.message || '设置成功',
            timeout: 2000
          });
          // 重新获取状态
          getReceiveControlStatus();
        } else {
          $q.notify({
            type: 'negative',
            message: response?.message || '设置失败',
            timeout: 2000
          });
        }
      } catch (error) {
        console.error('设置机组上台车状态失败:', error);
        $q.notify({
          type: 'negative',
          message: '设置机组上台车状态失败',
          timeout: 2000
        });
      }
    };

    // 更新表格数据
    const updateTableData = (data) => {
      // 确保数据是数组
      if (!Array.isArray(data)) {
        console.warn('收到的台车指令数据不是数组格式');
        return;
      }

      // 清空现有数据
      tableData.value = [
        [ '', '', '', '', ''],
        [ '', '', '', '', ''],
        [ '', '', '', '', ''],
        [ '', '', '', '', '']
      ];

      // 填充新数据（最多4条）
      const maxRows = Math.min(data.length, 4);
      for (let i = 0; i < maxRows; i++) {
        const order = data[i];
        tableData.value[i] = [
          order.matNo || '',
          order.orderNo || '',
          getOrderStatusText(order.orderStatus),
          order.frPos || '',
          order.toPos || ''
        ];
      }
    };

    // 指令状态转换函数
    const getOrderStatusText = (status) => {
      if (status === undefined || status === null) return '';
      
      const statusMap = {
        '-1': 'CLTS指令',
        '1': '初始化',
        '2': '激活(可执行)',
        '11': '准备去起吊',
        '13': '起吊重载',
        '21': '空车停止',
        '23': '起吊后切手动',
        '15': '卸下执行中',
        '25': '卸下过程中切手动',
        '9': '自动完成',
        '8': '手动在卸下位卸下',
        '-999999': '材料未在指令位置',
        '999999': '人工强制卸下',
        '-3': '指令执行前异常',
        '-5': '指令不完整',
        '-9': '指令执行中异常'
      };
      
      return statusMap[status.toString()] || `未知(${status})`;
    };

    // 需求状态转换函数
    const getNeedStatusText = (status) => {
      if (status === undefined || status === null) return '';
      
      const statusMap = {
        '1': '初始化',
        '11': '待装车',
        '12': '待卸车'
      };
      
      return statusMap[status.toString()] || `未知(${status})`;
    };

    // 更新需求表格数据
    const updateNeedTableData = (data) => {
      // 确保数据是数组
      if (!Array.isArray(data)) {
        console.warn('收到的台车需求数据不是数组格式');
        return;
      }

      // 更新需求数据（显示所有数据，不限制条数）
      needTableData.value = data;
    };

    const handlePlcData = (data) => {
      if (!data) {
        console.warn('收到无效的PLC数据');
        return;
      }
      
      // 处理故障信号
      if (data.trolleyErro !== undefined) faultSignal.value = data.trolleyErro;
      
      // 处理锁定信号
      if (data.trolleyLock !== undefined) lockSignal.value = data.trolleyLock;
      
      // 处理控制模式
      if (data.trolleyMode !== undefined) {
        switch (data.trolleyMode) {
          case 1: controlMode.value = '本地'; break;
          case 2: controlMode.value = '遥控'; break;
          case 3: controlMode.value = '自动'; break;
          default: controlMode.value = '未知';
        } 
      }
      
      // 处理台车位置
      if (data.trolleyPos !== undefined) {
        switch (data.trolleyPos) {
          case 1: location.value = '连退库'; break;
          case 0: location.value = '未到位'; break;
          default: location.value = '未知';
        }
      }
      
      // 处理材料信息
      if (data.trolley1Mat !== undefined) material1.value = data.trolley1Mat || '--';
      if (data.trolley2Mat !== undefined) material2.value = data.trolley2Mat || '--';
    };

    // 创建过跨指令对话框
    const openCreateOrderDialog = async () => {
      try {
        // 1. 首先获取库位数据
        await fetchStockOptions();
        
        let matNo = '';
        let selectedLibrary = '';
        
        // 创建一个循环，允许用户在步骤间返回
        while (true) {
          // 2. 使用 prompt 对话框获取材料号
          const matNoResult = await new Promise(resolve => {
            $q.dialog({
              title: '创建指令',
              message: '请输入材料号',
              prompt: {
                model: matNo, // 保留之前输入的值
                type: 'text',
                isValid: val => val.trim().length > 0
              },
              cancel: true,
              persistent: true
            }).onOk(inputMatNo => {
              resolve({ success: true, value: inputMatNo.trim() });
            }).onCancel(() => {
              resolve({ success: false });
            });
          });
          
          // 如果用户取消了材料号输入，直接退出
          if (!matNoResult.success) return;
          
          matNo = matNoResult.value;
          
          // 3. 选择目标库区
          const libraryOptions = [
             { label: 'Z018 - 精整库区', value: 'Z018' },
            { label: 'Z013 - 罩退库区', value: 'Z013' },
            { label: 'Z015 - 连退后库', value: 'Z015' }
           
          ];
          
          const libraryResult = await new Promise(resolve => {
            $q.dialog({
              title: '选择目标库区',
              message: '请选择材料要送到的库区',
              options: {
                type: 'radio',
                model: selectedLibrary || null, // 保留之前选择的值
                items: libraryOptions
              },
              cancel: true,
              persistent: true
            }).onOk(inputLibrary => {
              resolve({ success: true, value: inputLibrary });
            }).onCancel(() => {
              resolve({ success: false });
            });
          });
          
          // 如果用户取消了库区选择，返回材料号输入步骤
          if (!libraryResult.success) {
            selectedLibrary = ''; // 清空库区选择
            continue; // 继续循环，返回材料号输入
          }
          
          selectedLibrary = libraryResult.value;
          
          // 4. 创建指令
          createTrolleyNeed({
            matNo: matNo,
            toPos: selectedLibrary
          });
          
          // 成功创建后退出循环
          break;
        }
      } catch (error) {
        console.error('创建过跨指令出错:', error);
        $q.notify({
          type: 'negative',
          message: '创建过跨指令失败，请重试'
        });
      }
    };

    // 发送创建指令请求
    const createTrolleyNeed = async (data) => {
      try {
        const response = await api.post('/trolleyController/addTrolleyNeed', data);
        
        if (response && response.code === 200) {
          $q.notify({
            type: 'positive',
            message: '过跨指令创建成功',
            timeout: 2500
          });
          
          // 刷新数据
          fetchTrolleyOrders();
        } else {
          $q.notify({
            type: 'negative',
            message: response?.message || '过跨指令创建失败',
            timeout: 2500
          });
        }
      } catch (error) {
        console.error('创建过跨指令失败:', error);
        $q.notify({
          type: 'negative',
          message: '过跨指令创建失败',
          timeout: 2500
        });
      }
    };

    // 右键点击行处理
    const showDeleteMenu = (event, row) => {
      if (row && row.matNo && row.matNo !== '') {
        selectedRow.value = row;
        menuTarget.value = event.target;
        contextMenuVisible.value = true;
        // 阻止默认行为和冒泡
        event.preventDefault();
        event.stopPropagation();
      }
    };
    
    // 全局点击事件处理函数
    const hideContextMenu = () => {
      contextMenuVisible.value = false;
    };

    // 删除需求项
    const deleteNeedItem = async () => {
      if (!selectedRow.value || !selectedRow.value.matNo) {
        $q.notify({
          type: 'negative',
          message: '请选择有效的过跨需求',
          timeout: 2000
        });
        return;
      }
      
      try {
        await api.post('/trolleyController/updateTrolleyNeed', {
          matNo: selectedRow.value.matNo,
          status: 0  // 0表示删除
        });
        
        // 直接显示删除成功，不判断响应
        $q.notify({
          type: 'positive',
          message: '删除成功',
          timeout: 2000
        });
        
        // 直接刷新需求数据
        fetchTrolleyNeeds();
      } catch (error) {
        console.error('删除过跨需求失败:', error);
        $q.notify({
          type: 'negative',
          message: '删除过跨需求失败',
          timeout: 2000
        });
      }
    };

    // 点击删除按钮处理
    const deleteItem = (row) => {
      if (row && row.matNo) {
        $q.dialog({
          title: '确认删除',
          message: `确认要删除材料 ${row.matNo} 的过跨需求吗？`,
          cancel: true,
          persistent: true,
          ok: {
            label: '确认',
            color: 'negative',
            flat: false
          },
          cancel: {
            label: '取消',
            color: 'primary',
            flat: true
          }
        }).onOk(() => {
          selectedRow.value = row;
          deleteNeedItem();
        });
      }
    };

    // 清除台车材料
    const clearMaterial = (saddleNo, materialNo) => {
      $q.dialog({
        title: '确认清除',
        message: `确认要清除${saddleNo === '01' ? '材料1' : '材料2'} (${materialNo}) 吗？`,
        cancel: true,
        persistent: true,
        ok: {
          label: '确认',
          color: 'negative',
          flat: false
        },
        cancel: {
          label: '取消',
          color: 'primary',
          flat: true
        }
      }).onOk(async () => {
        try {
          const response = await api.post('/trolleyController/clearTrolleyMat', {
            matNo: materialNo, 
            saddleNo: saddleNo,
            trolleyNo: 'PT3'
          });
          
          if (response && response.code === 200) {
            $q.notify({
              type: 'positive',
              message: '清除成功',
              timeout: 2000
            });
          } else {
            $q.notify({
              type: 'negative',
              message: response?.message || '清除失败',
              timeout: 2000
            });
          }
        } catch (error) {
          console.error('清除台车材料失败:', error);
          $q.notify({
            type: 'negative',
            message: '清除台车材料失败',
            timeout: 2000
          });
        }
      });
    };

    // 组件挂载和卸载
    onMounted(() => {
      // 获取台车指令数据
      fetchTrolleyOrders();
      
      // 获取台车需求数据
      fetchTrolleyNeeds();
      
      // 获取库位数据
      fetchStockOptions();
      
      // 获取机组上台车状态
      getReceiveControlStatus();
      
      // 添加全局点击事件监听
      document.addEventListener('click', hideContextMenu);
      
      // 设置定时器，每5秒刷新一次数据
      const timer = setInterval(() => {
        fetchTrolleyOrders();
        fetchTrolleyNeeds();
        getReceiveControlStatus();
      }, 5000);
      
      // 组件卸载时清除定时器和事件监听
      return () => {
        clearInterval(timer);
        document.removeEventListener('click', hideContextMenu);
      };
    });

    return {
      // 返回响应式数据
      faultSignal,
      lockSignal,
      controlMode,
      location,
      receiveControlStatus,
      material1,
      material2,
      wsInstance,
      tableData,
      needTableData,
      stockOptions,
      contextMenuVisible,
      selectedRow,
      menuTarget,
      // 静态数据
      tableTitles: ['材料号', '指令号', '指令状态', '起吊位', '卸下位'],
      needTableTitles: ['材料号', '原库区', '目标库区', '状态', '操作'],
      // 方法
      openCreateOrderDialog,
      getNeedStatusText,
      showDeleteMenu,
      deleteNeedItem,
      deleteItem,
      clearMaterial,
      showReceiveControlStatusDialog,
      getReceiveControlStatusText,
      // 计算属性
      isOrderTableEmpty() {
        return tableData.value.every(row => row.every(cell => !cell || cell === ''));
      },
      isNeedTableEmpty() {
        return !needTableData.value || needTableData.value.length === 0;
      }
    }
  },
  beforeUnmount() {
    if (this.wsInstance) {
      console.log('关闭WebSocket连接');
      this.wsInstance.close();
    }
  }
}
</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  background-color: rgb(250, 250, 250);
  width: 100%;
  display: flex;
}

.trolley-container {
  padding: 20px;
  background-color: rgb(250, 250, 250);
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  box-sizing: border-box;
}

.header {
  background-color: #2185ff;
  padding: 10px 20px;
  font-size: 18px;
  color: white;
  margin-bottom: 20px;
}

.info-panel {
  display: flex;
  border: 1px solid #ddd;
  flex: 0.45;
  background-color: white;
  margin-bottom: 20px;
  height: 45vh;
}

.info-list {
  width: 320px;
  padding: 20px;
  border-right: 1px solid #ddd;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.info-item {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.button-container {
  position: relative;
  top: 0;
  margin-top: -11px;
}

.indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ddd;
}

.trolley-display {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.trolley-visualization {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

.position {
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  transform: translateY(-60%); /* 向上偏移，为底部标签留出空间 */
}

.position-center {
  left: 50%;
  transform: translate(-50%, -60%);
}

.position-image {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* 台车占位图样式 */
.trolley-placeholder {
  width: 150px;
  height: 80px;
  position: relative;
  margin: 0 auto;
}

.trolley-base {
  width: 150px;
  height: 40px;
  background-color: #666;
  position: absolute;
  bottom: 15px;
  border-radius: 5px;
}

.trolley-wheels {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.wheel {
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
}

.wheel.left {
  left: 30px;
}

.wheel.right {
  right: 30px;
}

.warehouse-labels {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.warehouse {
  text-align: center;
  font-size: 22px;
  white-space: nowrap;
  color: inherit;
}

.warehouse-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.active-warehouse {
  /* 不应用任何样式 */
}

.data-table {
  flex: 0.55;
  background-color: white;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  height: 50vh;
}

.tables-container {
  display: flex;
  height: 100%;
}

.table-section {
  flex: 1;
  height: 100%;
  overflow: auto;
  transition: overflow 0.1s ease-in-out;
  max-height: 50vh;
}

.left-table {
  border-right: 1px solid #f0f0f0;
}

.no-data-scrollbar {
  overflow: hidden !important;
}

.table-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  padding: 5px 8px;
  background-color: #f7f7f7;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

th, td {
  padding: 6px 8px;
  text-align: left;
  border: none;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr {
  border-bottom: 1px solid #f0f0f0;
  height: 30px;
}

thead tr {
  border-bottom: 2px solid #f0f0f0;
  background-color: #f9f9f9;
}

.page-title {
  background-color: #2185ff;
  color: white;
  padding: 4px 16px;
  margin: 0;
  height: 32px;
  display: flex;
  align-items: center;
  width: 100%;
}

.page-title h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.create-order-btn {
  width: 150px;
}

/* 创建指令弹窗样式 */
.create-order-dialog {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-title {
  font-size: 18px;
  font-weight: 500;
}

.close-icon {
  cursor: pointer;
  font-size: 18px;
}

.dialog-body {
  padding: 16px;
}

.input-group {
  margin-bottom: 16px;
}

.input-label {
  margin-bottom: 8px;
  font-size: 14px;
}

.order-input {
  width: 100%;
}

.dialog-footer {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
}

.dialog-btn {
  min-width: 100px;
}

.hoverable-row {
  cursor: pointer;
}

.hoverable-row:hover {
  background-color: #f7f7f7;
}

/* 整个表格行的每个单元格都可以右键点击 */
.hoverable-row td {
  cursor: context-menu;
}

/* 右键菜单样式 */
.q-menu {
  background: white;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.q-item {
  min-height: 36px;
  font-size: 14px;
}

.q-item:hover {
  background-color: #f7f7f7;
}

/* 操作列样式 */
.action-cell {
  text-align: center !important;
  width: 60px !important;
  padding: 0 4px !important;
}

.action-cell .q-btn {
  min-height: 28px;
  padding: 2px 6px;
}

.text-center {
  text-align: center !important;
}

.material-delete-btn {
  margin-left: 10px;
  min-height: 28px;
  min-width: 28px;
  padding: 5px;
}

.status-edit-btn {
  margin-left: 8px;
  min-height: 24px;
  min-width: 24px;
}

.material-delete-btn .q-icon {
  font-size: 18px;
}
</style>
